<!-- 店铺报表 -->
<template>
    <div class="page has-navbar statement">
        <tabs :tab-items="monthName" :tab-index="tabIndex" :on-tab-click="cutNavFn"></tabs>
        <div class="page-content">
            <div class="pie clearfix">
                <div class="totalMsg">
                    <span class="name">总额</span>
                    <span class="number color1" v-text="curMonthData.totalIncome"></span>
                    <span class="name">微信</span>
                    <span class="number color3" v-text="curMonthData.wechat"></span>
                    <span class="name">支付宝</span>
                    <span class="number color4" v-text="curMonthData.alipay"></span>
                </div>
                <div class="totalMsg">
                    <span class="name">现金</span>
                    <span class="number color2" v-text="curMonthData.cash"></span>
                    <span class="name">线下微信</span>
                    <span class="number color3" v-text="curMonthData.wechatpayCash"></span>
                    <span class="name">线下支付宝</span>
                    <span class="number color4" v-text="curMonthData.alipayCash"></span>
                </div>
                <div id="pie" class="left"></div>
            </div>
            <div class="HSpace1"></div>
            <div class="histogram">
                <div class="halfYearData">
                    <div class="title" v-text="'近六月数据(单位：元)'"></div>
                    <div class="totalMsg">
                        <span class="name">实收</span>
                        <span class="number color1" v-text="totalData.total"></span>
                        <span class="name">微信</span>
                        <span class="number color3" v-text="totalData.wechat"></span>
                        <span class="name">支付宝</span>
                        <span class="number color4" v-text="totalData.alipay"></span>
                    </div>
                    <div class="totalMsg">
                        <span class="name">现金</span>
                        <span class="number color2" v-text="totalData.cash"></span>
                        <span class="name">线下微信</span>
                        <span class="number color3" v-text="totalData.wechatpayCash"></span>
                        <span class="name">线下支付宝</span>
                        <span class="number color4" v-text="totalData.alipayCash"></span>
                    </div>
                </div>
                <div id="histogram"></div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import echarts from 'echarts';
export default{
    props: ['storeId'],
	data () {
		return {
            tabIndex: 0,
            monthFormat:{'1':"一月",'2':"二月",'3':"三月",'4':"四月",'5':"五月",'6':"六月",'7':"七月",'8':"八月",'9':"九月",'10':"十月",'11':"十一月",'12':"十二月"},//格式化月份
            monthData: [],//
            monthName: [],
            histogram: null,//柱状图
            pie: null,//饼状图
            curMonthData:{
                totalIncome: 0,
                cash: 0,
                wechat: 0,
                wechatpayCash: 0,
                wechat: 0,
                alipayCash: 0,
            },
            totalData: {
                total: 0, // 实收
                cash: 0, // 现金
                wechat: 0, // 微信
                alipay: 0, // 支付宝
                wechatpayCash: 0, // 线下微信
                alipayCash: 0, // 线下支付宝
            }, // 半年数据总和
		}
	},
    methods: {
        onTabClick: function ( index ) {

        },
        cutNavFn( index ){
            this.tabIndex = index;
            this.drawPie(this.monthData[index]);
            this.curMonthData = this.monthData[index];
        },
        drawPie(datas){
            console.log(datas);
            let othis = this;
            let seriesData = [
                {value:datas.cash, name:'现金'},
                {value:datas.wechat, name:'微信'},
                {value:datas.alipay, name:'支付宝'},
                {value:datas.wechatpayCash, name:'线下微信'},
                {value:datas.alipayCash, name:'线下支付宝'},
            ];
            if ( this.pie ) {
                this.pie.dispose();
            }
            this.pie = echarts.init(document.getElementById('pie'));
            setTimeout(function(){
                othis.pie.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    color: ["#fa5454", "#11e420", "#1d94ef", "#e7f50e", "#9119f7"],
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        bottom:0,
                        data:['现金','微信','支付宝','线下微信','线下支付宝'],
                    },
                    series: [
                        {
                            type:'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '20',
                                        fontWeight: 'bold'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:seriesData
                        }
                    ]
                });
            },200)
        },
        //柱状图
        drawHistogram ( datas ) {
            let othis = this;
            let numberArr =  [];//每月总销售额数据数组
            let monthArr =  [];//总月份
            for(let i = 0,len = datas.length; i < len;i++){
                //获取每月总销售额
                numberArr.push(datas[i].totalIncome);
                monthArr.push(this.monthFormat[datas[i].month]);
            }
            if ( this.histogram ) {
                this.histogram.dispose();
            }
            this.histogram = echarts.init(document.getElementById('histogram'));
            setTimeout(function(){
                //setTimeout避免拿不到店铺信息
                othis.histogram.setOption({
                    tooltip: {},
                    color: ["#87a2ea"],
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        top: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        data: monthArr,
                        axisLine: {
                            show: true, 
                            lineStyle: {
                                color: "#ddd"
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#444"
                            }
                        },
                        type: 'category',
                        // boundaryGap: false,
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show:true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#ddd'
                            }
                        },
                        axisLine: {
                            show: false, 
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#444",
                                fontSize: 12
                            }
                        }
                    },
                    series: [{
                        name: '销售额',
                        type: 'bar',
                        barWidth: '35%',
                        data: numberArr,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [5, 5, 0, 0]
                            },
                            emphasis: {
                                // backgroundImage: linearGradient(to bottom, #30bdff, #3068ff)
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'outside',
                                formatter: '{c}' // 这里是数据展示的时候显示的数据
                            }
                        },
                    }]
                });
            },200)
        },
    },
    created(){
        this.$http.get('/store-statics/'+this.storeId).then((res)=>{
            this.monthData = res.data.reverse();
            this.drawPie(this.monthData[0]);
            this.curMonthData = this.monthData[0];
            this.drawHistogram(this.monthData);

            for (let i = 0, len = this.monthData.length; i < len; i++) {
                this.monthName.push(this.monthFormat[this.monthData[i].month]);

                this.totalData.total += this.monthData[i].totalIncome;
                this.totalData.cash += this.monthData[i].cash;
                this.totalData.wechat += this.monthData[i].wechat;
                this.totalData.alipay += this.monthData[i].alipay;
                this.totalData.wechatpayCash += this.monthData[i].wechatpayCash;
                this.totalData.alipayCash += this.monthData[i].alipayCash;
            }
            this.totalData.total = this.totalData.total.toFixed(1);
            this.totalData.cash = this.totalData.cash.toFixed(1);
            this.totalData.wechat = this.totalData.wechat.toFixed(1);
            this.totalData.alipay = this.totalData.alipay.toFixed(1);
            this.totalData.wechatpayCash = this.totalData.wechatpayCash.toFixed(1);
            this.totalData.alipayCash = this.totalData.alipayCash.toFixed(1);
        })
    },
    mounted(){
        
    }
}
</script>
<style lang="scss" scoped>
	@import "statement";
</style>
